<template>
  <template v-for="item in btnInfo">
    <button @click="click(item.text)" :style="{ 'background-color': item.color }">{{ item.text }}</button>
  </template>
</template>

<script setup>
import { ref, watch, reactive, computed } from 'vue'

defineProps({
  btnInfo: ''
})

const emits = defineEmits(['resClick', 'textClick'])

let action = reactive([])
const click = text => {
  action.push(text)
}

let pres = ref()
let result = computed(() => {
  if (action[action.length - 1] != '=') {
    return ''
  }
  action.pop()
  return eval(action.join('').replace('%', '/100'))
})

watch(action, () => {
  if (action[action.length - 1] === 'AC') {
    action.pop()
    if (action.length === 0) {
      emits('resClick', 0)
    }
    action.pop()
  }
  emits('textClick', action)
  if (action[action.length - 1] === '=') {
    pres.value = result.value
    emits('resClick', pres.value)
    action.length = 0
    return ''
  }
})
</script>
